<template>
  <div class="contain">
    <div v-if="!dataList.seriesList.length" style="color:#888;text-align:center;line-height:260px">
      暂无数据
    </div>
    <table v-for="(j,k) in allList" v-else :key="k" class="pure-table pure-table-horizontal">
      <tr style="background-color:#f0f0f0">
        <th v-for="(item,index) in j.propList" :key="index">{{ item }}</th>
      </tr>
      <tr
        v-for="(item,index) in j.tableData"
        :key="index"
        class="highlight"
      >
        <td v-for="(i,key) in item" :key="key" :style="{fontWeight:key===0?'bold':''}">{{ i }}</td>
      </tr>
    </table>
  </div>
</template>
<script>
export default {
  name: 'Table',
  props: {
    dataList: {
      type: Object,
      default: () => { return {} }
    },
    styleNum: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      tableData: [],
      allList: [{
        firstCategory: '真皮沙发',
        propList: ['真皮沙发', '100以下', '1000-2000', '2000-5000'],
        tableData: [['L型', 1, 2, 3], ['U型', 4, 5, 6]]
      }, {
        firstCategory: '布艺沙发',
        propList: ['布艺沙发', '6000-7000', '7000-9000', '9000-10000', '10000以上'],
        tableData: [['L型', 7, 8, 9, 10], ['U型', 11, 12, 13, 14]]
      }, {
        firstCategory: '优＋沙发',
        propList: ['优＋沙发', '10000以上'],
        tableData: [['L型', 10], ['U型', 14]]
      }],
      propList: [],
      activeData: {}
    }
  },
  created() {
    const keyList = Object.keys(this.dataList).filter(v => Number(v) >= 0)
    const datas = []
    for (let i = 0; i < keyList.length; i++) {
      datas.push(this.dataList[keyList[i]])
    }
    this.tableData = datas
    this.propList = ['', '', ...this.dataList.seriesList]
    // console.log('嘻嘻嘻', this.tableData, this.propList)
  },
  methods: {
    handelclick(data, index) {
      this.activeData = data
    },
    getSelect() {
      return this.activeData
    }
  }
}
</script>
<style lang="scss" scoped>
.contain{
  // display: flex;
  // justify-content: center;
  padding:0 0 20px 0;
  max-width:1100px ;
}
td,th {
    padding: 0;
}
.pure-table {
    border-collapse: collapse;
    border-spacing: 0;
    empty-cells: show;
    border: 1px solid #cbcbcb;
}

.pure-table caption {
    color: #000;
    font: italic 85%/1 arial,sans-serif;
    padding: 1em 0;
    text-align: center;
}

.pure-table td,.pure-table th {
    border-left: 1px solid #cbcbcb;
    border-width: 0 0 0 1px;
    font-size: inherit;
    margin: 0;
    overflow: visible;
    padding: .5em 1em;
}

.pure-table thead {
    background-color: #e0e0e0;
    color: #000;
    text-align: left;
    vertical-align: bottom;
}

.pure-table td {
    background-color: transparent;
}
.pure-table-horizontal td,.pure-table-horizontal th {
    border-width: 0 0 1px 0;
    border-bottom: 1px solid #cbcbcb;
}

.pure-table-horizontal tbody>tr:last-child>td {
    border-bottom-width: 0;
}
/deep/.highlight:hover{
    background-color:#F5F7FA;
}
</style>
